<template>
	<div class="quill-editor-container">
	  <!-- 富文本编辑器 -->
	  <Tinymce :value="editorContent" :fontSize="fontSize" :indentation="indentation" :headingSize="headingSize" :lineHeight="lineHeight" class="editor-area" />
	  <!-- 操作按钮 -->
	  <div class="editor-actions">
		<button class="editor-action-btn submit-btn" @click="submitContent">提交内容</button>
		<button class="editor-action-btn load-btn" @click="loadContent">加载内容</button>
		<button class="editor-action-btn pdf-btn" @click="downloadAsPDF">下载为 PDF</button>
		<button class="editor-action-btn word-btn" @click="downloadAsWord">下载为 Word</button>
	  </div>
	  <!-- 显示编辑器内容的区域 -->
	  <!-- <div class="editor-output">
		<h3>编辑器内容：</h3>
		<div v-html="editorContent"></div>
	  </div> -->
	</div>
  </template>
  
  <script>
  import html2Canvas from 'html2canvas';
  import jsPDF from 'jspdf';
  import PizZip from 'pizzip';
  import Tinymce from '@/components/tinymce/vue-quill-editor.vue'
  
  export default {
	components: {
	  Tinymce
	},
	data() {
	  return {
		editorContent: '',
		fontSize: '',
		indentation: '',
		headingSize: '',
		lineHeight: ''
	  };
	},
	mounted() {
  
	  const responseData = this.$route.query.generatedPaper
    const fontSize = this.$route.query.fontSize
    const indentation = this.$route.query.indentation
    const headingSize = this.$route.query.headingSize
    const lineHeight = this.$route.query.lineHeight

    this.fontSize = fontSize
    this.indentation = indentation
    this.headingSize = headingSize
    this.lineHeight = lineHeight

    
  
	  if (responseData) {
		this.editorContent = responseData;
	  }
	},
	methods: {
  
	  submitContent() {
		console.log('Submitted content:', this.editorContent);
		localStorage.setItem('editorContent', this.editorContent);
	  },
	  loadContent() {
		const savedContent = localStorage.getItem('editorContent');
		if (savedContent) {
		  this.editorContent = savedContent;
		}
	  },
	  downloadAsPDF() {
		const element = document.querySelector('.quill-editor-container .ql-container');
		html2Canvas(element, { useCORS: true, scale: 4 }).then((canvas) => {
		  const pdf = new jsPDF('p', 'mm', 'a4');
		  const imgHeight = Math.floor(277 * canvas.width / 190);
		  let renderedHeight = 0;
  
		  while (renderedHeight < canvas.height) {
			const page = document.createElement("canvas");
			page.width = canvas.width;
			page.height = Math.min(imgHeight, canvas.height - renderedHeight);
  
			page.getContext('2d').putImageData(canvas.getContext('2d').getImageData(0, renderedHeight, canvas.width, Math.min(imgHeight, canvas.height - renderedHeight)), 0, 0);
			pdf.addImage(page.toDataURL('image/jpeg', 1.0), 'JPEG', 10, 10, 190, Math.min(277, 190 * page.height / page.width));
  
			renderedHeight += imgHeight;
			if (renderedHeight < canvas.height) {
			  pdf.addPage();
			}
		  }
		  pdf.save('editor_content.pdf');
		});
	  },
	  downloadAsWord() {
		const element = document.querySelector('.quill-editor-container .ql-container');
		const htmlContent = element.innerHTML;

		// 创建 Word 文档的 HTML 模板
		const template = `
		  <html xmlns:w="urn:schemas-microsoft-com:office:word">
			<head>
			  <meta charset="UTF-8">
			  <style>
				body { font-family: Arial, sans-serif; font-size: 14px; line-height: 1.6; }
				h1 { font-size: 20px; font-weight: bold; }
				h2 { font-size: 18px; font-weight: bold; }
				p { margin: 10px 0; }
			  </style>
			</head>
			<body>
			  ${htmlContent}
			</body>
		  </html>
		`;

		const blob = new Blob([template], { type: 'application/msword' });
		const link = document.createElement('a');
		link.href = URL.createObjectURL(blob);
		link.download = 'editor_content.doc'; // 设置下载文件名
		link.click();
		URL.revokeObjectURL(link.href); // 释放内存
	  },
	}
  }
  //   downloadAsWord() {
  //     const editorElement = document.querySelector('.quill-editor-container .ql-container');
  //     const htmlContent = editorElement.innerHTML;
  
  //     // 创建 Word 文档的 HTML 模板
  //     const template = `
  //       <html xmlns:w="urn:schemas-microsoft-com:office:word">
  //         <head>
  //           <meta charset="UTF-8">
  //           <style>
  //             body { font-family: Arial, sans-serif; font-size: 14px; line-height: 1.6; }
  //             h1 { font-size: 20px; font-weight: bold; }
  //             h2 { font-size: 18px; font-weight: bold; }
  //             p { margin: 10px 0; }
  //           </style>
  //         </head>
  //         <body>
  //           ${htmlContent}
  //         </body>
  //       </html>
  //     `;
  
  //     const zip = new PizZip();
  //     zip.file('word/document.xml', template);
  
  //     const doc = new Docxtemplater(zip);
  //     const blob = doc.getZip().generate({ type: 'blob' });
  
  //     const link = document.createElement('a');
  //     link.href = URL.createObjectURL(blob);
  //     link.download = 'editor_content.docx';
  //     link.click();
  //   },
  // },
  // };
  </script>
  
  <style scoped>
  .quill-editor-container {
	display: flex;
	flex-direction: column;
	height: 600px;
	max-width: 1200px;
	margin: 20px auto;
	padding: 20px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  }
  
  .editor-area {
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	margin-bottom: 20px;
	background: #fff;
	height: 500px;
	overflow: auto;
  }
  
  .editor-actions {
	display: flex;
	gap: 12px;
	padding: 15px;
	background: #f5f7fa;
	border-radius: 8px;
  }
  
  .editor-action-btn {
	padding: 10px 24px;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
	transition: all 0.3s ease;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  
  .submit-btn { background: #409eff; color: white; }
  .load-btn { background: #67c23a; color: white; }
  .pdf-btn { background: #9c27b0; color: white; }
  .word-btn { background: #f56c6c; color: white; }
  
  .editor-action-btn:hover {
	opacity: 0.9;
	transform: translateY(-1px);
	box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  }
  
  .quill-editor-container .ql-container {
	flex: 1;
	/* 编辑器占满剩余空间 */
	overflow: auto;
  }
  
  .editor-output {
	padding: 20px;
	border-top: 1px solid #ccc;
	background-color: #f9f9f9;
	overflow: auto;
  }
  </style>
  